<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="/images/chiji.ico" type="image/x-icon">
    <title>商品页</title>
    <link rel="stylesheet" href="/css/shoplist.css">
    <link rel="stylesheet" href="/css/moudle/footer.css">
</head>

<body>
    <header></header>
    <div class="mid-center">
        <div class="bread">
            <span><a href="/index.html" class="first" target="_blank">首页></a></span>
            <span><a href="#" target="_blank" style="margin-right: 0px;cursor: default;text-decoration: none;color: #999;">所有商品</a></span>
        </div>
        <!-- 条件过滤 -->
        <div class="list-filter">
            <div class="showclass">
                <dl>
                    <dt>分类：</dt>
                    <dd class="curall">全部</dd>
                    <dd class="cat">周年纪念礼盒</dd>
                    <dd class="cat">家居日用</dd>
                </dl>
            </div>
            <div class="sort">
                <dl class="sortfl">
                    <dt>排序</dt>
                    <dd class="cur" type="sort">默认</dd>
                    <dd class="arrow">
                        <span>价格</span>
                        <a href="#" class="sort-price"></a>
                    </dd>
                    <dd class="arrow">
                        <span>新品</span>
                        <a href="#" class="sort-price"></a>
                    </dd>
                    <dd class="arrow">
                        <span>人气</span>
                        <a href="#" class="sort-num"></a>
                    </dd>
                    <dd class="arrow">
                        <span>销量</span>
                        <a href="#" class="sort-num"></a>
                    </dd>
                </dl>
                <dl class="sortfr">
                    <dt>筛选</dt>
                    <dd class="check">
                        <input type="checkbox">
                        <span>有货</span>
                    </dd>
                    <dd class="check">
                        <input type="checkbox">
                        <span>包邮</span>
                    </dd>
                    <dd class="check">
                        <input type="checkbox">
                        <span>聚豆可抵</span>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="good-list">
            <ul id="gList">
                <script type="text/html" id="goodsList">
                    {{each list item}}
                    <li>
                        <a href="/html/detail.html?id={{item.id}}" target="_blank">
                            <img src="{{item.image}}" width="280" height="268" alt="商品图">
                            <div class="good-info">
                                <p class="gname">{{item.title}}</p>
                                <div class="gprice">
                                    <p class="new-pri">￥{{item.price}}</p>
                                    <p class="old-pri">￥{{item.originPrice}}</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </script>

                <!-- <li>
                    <a href="#">
                        <img src="/images/shower01.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower01.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower01.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower02.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower03.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">小黄人爆炸头卫衣</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower04.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower05.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower06.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/images/shower01.jpg" width="280" height="268" alt="商品图">
                        <div class="good-info">
                            <p class="gname">快递小哥棒球帽</p>
                            <div class="gprice">
                                <p class="new-pri">￥168</p>
                                <p class="old-pri">￥299</p>
                            </div>
                        </div>
                    </a>
                </li> -->
            </ul>
            <!-- 分页按钮 -->
            <div class="pagebtn">
                <span class="pagel"><a page="1" href="#" id="page-n">1</a></span>
                <span class="pager">
                    <a href="javascript:;" class="fl" id="prev"></a>
                    <a href="javascript:;" class="fr" id="next"></a>
                </span>
            </div>
        </div>


    </div>
    <footer></footer>
    <div class="totop" style="color: #ff0000;background: #ccc; width: 100px;text-align: center">返回顶部</div>
    <script src="/libs/require/require.min.js" data-main="/js/shoplist"></script>

</body>

</html>